import React,{Component} from 'react'
const MyContext=React.createContext();
const {Provider}=MyContext;
class Grand extends Component{
	static contextType = MyContext
	render(){
		const {name,age} = this.context;
		return (
			<div className="wrapper" style={{backgroundColor:'orange'}}>
				<h4 className='display-4'>{name}-{age}</h4>
			</div>
		)
	}
}

class Son extends Component{
	render(){
		return (
			<div className="wrapper" style={{backgroundColor:'green'}}>
				<Grand />
			</div>
		)
	}
}

class Parent extends Component{
	render(){
		return (
			<div className="wrapper" style={{backgroundColor:'red'}}>
				<Son />
			</div>
		)
	}
}


const ClassComponent=()=>{
	return (
		<div className="container">
			<Provider value={{name:'cowen',age:32}}>
				<Parent />
			</Provider>
		</div>
	)
}

export default ClassComponent